<script setup lang="ts">
const props = defineProps({
  taskList: {
    type: Array as any,
    default: () => []
  }
})
</script>
<template>
  <div class="company-task">
    <h3>其他任务<i></i></h3>
    <dl>
      <dt v-for="(item, index) in taskList" :key="index">
        <h4>
          {{ item.task_name }}<span>{{ item.task_budget }}元</span>
        </h4>
        <p>
          {{ item.city }} ｜ {{ item.task_cycle }}天 ｜ {{ item.service_mode }}
        </p>
      </dt>
    </dl>
  </div>
</template>
<style scoped>
h3 {
  font-size: 0.96rem;
  line-height: 0.96rem;
  font-weight: 500;
  color: #333333;
  padding-left: 0.64rem;
  margin-bottom: 0.4rem;
  position: relative;
}
dl dt {
  padding: 1.4rem 0.64rem;
  border-bottom: 1px solid #f0f0f0;
}
h3 i {
  width: 1.87rem;
  height: 0.64rem;
  background: linear-gradient(90deg, #fe8f27, #ffffff);
  opacity: 0.46;
  border-radius: 0.32rem;
  position: absolute;
  left: 0.5rem;
  top: 0.4rem;
  z-index: -1;
}
h4 {
  font-size: 0.85rem;
  line-height: 0.85rem;
  font-weight: 400;
  color: #333333;
  margin-bottom: 0.48rem;
  display: flex;
}
h4 span {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 400;
  color: #f1983c;
  flex: 1;
  text-align: right;
}
p {
  font-size: 0.69rem;
  line-height: 0.69rem;
  font-weight: 100;
  color: #333333;
}
</style>
